.body-main {
    display: flex;
    width: 100%;
    background-color: #ffffff;
}

.body-left-menu {
    width: 18%;
}

.body-center-table {
    font-family: Arial, sans-serif;
    margin: 1px;
    background-color: #f2f2f2;
    width: 82%;

}

.body-center-table h1 {
    margin-left: 4px;
    background-color: #ffffff;
}


.table {
    padding: 2px;
    color: #000000;
    border-collapse: collapse;
    word-wrap: initial;
    width: 100%;
    font-size: 16px;

}

.more-info {
    text-align: center;
    font-weight: bold;
}

.table th {
    background-color: #a3ff90;
    color: #000000;
    padding: 5px;
    border: 1px solid #006699;
}

.table td {
    padding: 5px;
    border: 1px solid #006699;
}

.table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.table tr:hover {
    background-color: #ddd;
}


.job-table-for-mobile {
    display: none;
}






/* ///////////////   Mobile Screen View ////////////////   */
@media only screen and (min-width:200px) and (max-width:557px) {
    .body-main {
        flex-direction: column-reverse;
    }

    .job-table-for-desktop {
        display: none;
    }

    .body-center-table {
        width: 100%;
       

    }

    .job-table-for-mobile {
        
        margin-left: 1.5px;
        margin-right: 1.5px;
        display: table;
    }

    table {
        width: 100%;
        /* Let the table take full width */
        border-collapse: collapse;
        table-layout: auto;
        /* Default behavior: columns adjust to content */
        margin-bottom: 1px;
    }

    thead th {
        background-color: #aaa;
        /* text-align: center; */
        font-size: 14px;
        padding: 3px;
    }

    table,
    th,
    td {
        border: 1px solid black;
    }

    td,
    th {
        padding: 2px;
        font-size: 10px;


    }

    td:first-child {
        white-space: nowrap;
        /* Prevent the first <td> from wrapping */
        width: 1%;
        /* Make the first <td> take the size of its content */
        font-weight: bold;
    }

    td:nth-child(2) {
        width: auto;
        /* Allow the second <td> to take the remaining space */
    }

    .details-btn {
        text-align: center;
        font-weight: bold;
        background-color: #4ae27d;
        cursor: pointer;
        font-size: 14px;
        padding-left: 9px;
        padding-right: 9px;
        white-space: nowrap;
        width: 1%;


    }

    .details-btn:hover {
        background-color: #caf35a;
    }

    .body-left-menu {
        width: 100%;
        margin-top: 10px;

    }

}